<template>
	<t-modal :title="$ct('SelectCustomForm','选择自定义表单')" :width="1000" :visible="visible" wrapClassName="t-popup-modal"
		@ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" :destroyOnClose="true" :confirmLoading="confirmLoading">
		<a-row :gutter="10">
			<!-- <a-col :md="10" :sm="24">
				<a-card :bordered="false">
					<data-grid 
						ref="masterList" 
						type="master" 
						:columns="masterColumns" 
						:url="url"
						:showRowSelect="false" 
						rowKey="uuid" 
						showPagination="auto"
						:scroll="scrollXY"
						@rowClick="(e) => {
							masterRowClick(e, { puuid: 'uuid' });
						}"
					>
					</data-grid>
				</a-card>
			</a-col> -->
			<a-col :md="24" :sm="24">
				<a-card :bordered="false" >
					<tool-bar
					  @search="$refs.subList.refresh(true)"
					  @reset="resetSearchForm"
					>
					  <template slot="toolForm">
					    <a-form-item :label="$ct('FormName','表单名称')">
					      <a-input v-model="subQueryParam.name" :placeholder="$ct('FormName','表单名称')" />
					    </a-form-item>
					  </template>
					</tool-bar>
					<div class="page-common-sub-box">
						<data-grid
						  ref="subList"
						  type="sub"
						  :url="url"
						  :columns="subColumns"
						  :queryParam="subQueryParam"
						  rowKey="uuid"
						  showPagination="auto"
						  rowSelectionType="radio"
							:scroll="scrollXY"
							@rowClick="subRowClick"
						>
							<span slot="renderAction" slot-scope="{ text, record }">
								<a @click="handlePreview(record)">{{$ct("preview","预览")}}</a>
							</span>
						</data-grid>
					</div>
				</a-card>
			</a-col>
		</a-row>
		<preview-form ref="previewForm" :visible="previewFormVisible" :data="jsonData" @cancel="previewFormCancel"></preview-form>
	</t-modal>
</template>

<script>
	import {
		masterTableMixin
	} from "@/mixins/masterTableMixin";
	import { TreeGrid, DataGrid } from "@/components";
	import previewForm from "./previewForm.vue";

	export default {
		mixins: [masterTableMixin],
		components: {
			TreeGrid,
			DataGrid,
			previewForm
		},
		props: {
			visible: {
				type: Boolean,
			},
			confirmLoading: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				mdl: null,
				// 查询参数
				queryParam: {},
				masterColumns: [{
					title: "分类名称",
					dataIndex: "classifyName",
					ellipsis: true,
          			langCode: "classificationName",
				}],
				subColumns: [{
					title: "表单名称",
					dataIndex: "name",
          			langCode: "FormName",
					align: "center",
				},
				{
					title: "表单编码",
					dataIndex: "code",
				 	width: 150,
				  	langCode: "FormCode",
				},
				{
					title: "操作",
					align: "center",
					dataIndex: "action",
					width: 150,
					scopedSlots: {
						customRender: "renderAction",
					},
					fixed: "right",
				}],
				orgTree: [],
				url: {
					masterList: "/form/formModule/getPageSet",
					subList: "/form/formBasicConfigure/getPageSet",
					subSave: "/form/formTable/save",
					subUpdate: "/form/formTable/update",
					subDelete: "/form/formBasicConfigure/deleteBatch"
				},
				// 加载数据方法 必须为 Promise 对象
				loadData: (parameter) => {
					const requestParameters = Object.assign({}, parameter, this.queryParam);
					return this.$post(this.url.getUserList, requestParameters).then(
						(res) => {
							delete this.queryParam.pageNo
							return res;
						}
					);
				},
				masterRows: null,
				subQueryParam: {
					type: "normalForm",
					templateClassiftCode: '00'
				},
				subHeight : 0,
				parameter: {
				  father: {
				    levelId: 1,
				  },
				  children: {},
				},
				previewFormVisible: false,
				jsonData: {},
			};
		},
		computed: {
			scrollXY(){
				let subHeight = this.subHeight ? this.subHeight : 500
				let height = subHeight - 40 - 40
				return { y : height};
			},
		},
		filters: {

		},
		watch: {

		},
		created() {
			this.$nextTick(()=>{
				this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
			})
		},
		methods: {
			subRowClick(record){
				let keys = [];
				keys.push(record.uuid);
				this.$refs.subList.selectedRowKeys = keys;
				this.$refs.subList.selectedRows = [record];
			},
			handleSubmit(){
				if(!this.$refs.subList.selectedRowKeys.length){
					return this.$message.warn('请勾选要使用的表单', 1.5)
				}
				const uuid = this.$refs.subList.selectedRows[0].uuid;
				const name = this.$refs.subList.selectedRows[0].name;
				this.$emit("ok", uuid, name);
			},
			handleCancel(){
				this.$emit("cancel")
			},
			resetSearchForm(){
				this.subQueryParam = {
					puuid: this.masterRows?.id
				}
				this.$refs.subList.refresh(true);
			},
			handlePreview(val) {
				this.$post("/form/formBasicConfigure/getDetailByUuid", {
					uuid: val.uuid
				}).then(res => {
					this.$refs.previewForm.plugs = [];
					this.previewFormVisible = true;
					this.$refs.previewForm.plugs.push(() =>
					  import(`@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue`)
					);
					this.$refs.previewForm.drawingList = JSON.parse(res.formDesign.designJson);
				})

			},
			previewFormCancel(){
				this.previewFormVisible = false;
			}
		},
	};
</script>

<style lang="less" scoped>
	/deep/.advanced-table{
		height: 100% !important;
	}
	/deep/.ant-modal-body {
		padding-top: 0px !important;
	}
	/deep/.division-bar {
		background-color: #fff !important;
		height: 0px !important;
		margin-top: -5PX !important;
	}
</style>
